<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        
        #btn {
            width: 60px;
            height: 60px;
            position: fixed; /* //固定定位设置 */
            right: 30px;
            bottom: 30px;
            background-color: rgb(207, 207, 207);
            border-radius: 30px;
            display: none;
            justify-content: center;
            align-items: center;
            color: honeydew;
        }
        .box{
            border: solid 1px #C9C9C9;
            margin: 10px;
        }
        /* 如果list没给高度则给一个默认高度 */
        .iframe-card{
            height: 500px;
        }
        .word-card{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

        }
        .word{
            /* margin:10px !important; */
            /* border: 1px solid #C9C9C9; */
            background-color: #fff;
            font-size: 12px;
            color: #ffffff;text-decoration: none;cursor: pointer;
            padding: 7px;
            background-color: gray;
            transition: all 0.6s;
        }
        .word:hover{
            transform: scale(1.2);
        }
        .show_component{
            display:flex;
            flex-direction: column;
            height: 100%;
        }
        .btn-card{
            /* background-color: rgba(0, 0, 0, 0.507); */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 10px;
        }
        .btn-card .small{
            margin-right: 5px;
        }
    </style>
</head>

<body>
     <a href="javascript:;" id="btn" title="回到顶部"><img style="width: 50px;height: 50px;" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/to_top.svg" /></a>
        <div id="demo_x" class="box" ></div>
        <div id="demo_x2" class="box">

        </div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<link class="_dcdev_preset_" type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="/component_index.js"></script>
<script>
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div class="word-card"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="cycy" class="word" style="background-color: #{bgcolor};">#{desc}</div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "cycy") {
                        console.log(res.node);
                        console.log(res.value.desc)
                        //渲染列表
                        render_somthing_demo_x2.render(madeComponent(res.value.desc));
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        //预处理数据
        var component_name = [];
        component_index.forEach(element => {
            var result = component_name.some(item=>{
                if(item.desc==element.desc){
                    return true 
                } 
            })
            if(!result){ // 如果不存在
                component_name.push({desc:element.desc,bgcolor:getColor2()});
            }
        });
        console.log(component_name)
        render_somthing_demo_x.render(component_name);
        //随机色
        function getColor(){
            var r = Math.floor(Math.random() * 4);
            var google_blue='#2d85f0';
            var google_red='#f4433c';
            var google_yellow='#ffbc32';
            var google_green='#0aa858';
            switch (r) {
                case 0:
                    return google_blue;
                    break;
                case 1:
                    return google_red;
                    break;
                case 2:
                    return google_yellow;
                    break;
                case 3:
                    return google_green;
                    break;
                default:
                    return google_blue;
                    break;
            }
        }
        //获取循环三原色
        function getColor2(){
            var google_blue='#2d85f0';
            var google_red='#f4433c';
            var google_yellow='#ffbc32';
            var google_green='#0aa858';
            console.log(window.flag)
            if(window.flag==undefined || window.flag==3){
                window.flag=-1;
            }
            window.flag=window.flag+1;
                switch (window.flag) {
                case 0:
                    return google_blue;
                    break;
                case 1:
                    return google_red;
                    break;
                case 2:
                    return google_yellow;
                    break;
                case 3:
                    return google_green;
                    break;
                default:
                    return google_blue;
                    break;
            }

            console.log(window.flag)
        }
        
        window.onload = function() {
            // 获取页面可视区的高度
            var clientHeight = document.documentElement.clientHeight;
            // 回到顶部，按钮
            var obtn = document.getElementById('btn');
            var timer = null;
            var isTop = true;
        
            // 滚动条 滚动时触发
            window.onscroll = function() {
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (osTop >= 100) {
                    obtn.style.display = 'flex'; // 显示
                } else {
                    obtn.style.display = 'none'; // 隐藏
                }
                if (!isTop) {
                    clearInterval(timer)
                }
                isTop = false; // 
            }
            $('#btn').click(function(){
                $('html , body').animate({scrollTop: 0},'slow');
            });
        }
        var render_somthing_demo_x2;
        render_somthing_demo_x2 = new render_somthing();
        render_somthing_demo_x2.init({
            // div的id
            id: "#demo_x2",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div ></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
            <div class="show_component">
                <div class="btn-card">
                    <div class="small">#{desc}</div>
                    <div class="small">#{vendor}</div>
                    <button>使用</button>
                </div>
                
                <iframe class="iframe-card" style="height: #{height}px;" src="/#{path}"></iframe>
            </div>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })

        
        //制作对应的组件的数组
        function madeComponent(name){
            var data =[];
            component_index.forEach(element => {
                if(element.desc==name){
                    data.push(element);
                }
            })
            return data;
        }
    }

</script>

</html>